{include file="common/header"}
<script>
    $('#example-navbar-collapse>ul>li').removeClass('active')
    $($('#example-navbar-collapse>ul>li')[4]).addClass('active')
</script>
<style>
    .form-group {
        float: unset!important;
        margin-left: auto;
        margin-right: auto;
    }

    form {
        float: unset!important;
        margin-left: auto!important;
        margin-right: auto!important;
    }

    #main-block {
        display: flex;
        justify-content: space-between;
        margin-top: 80px;
    }
</style>
<div id="main-block">
    <div class="container">

        <div class="container col-md-3" id="left-menu">
            <div id="sidebar" class="span3">
                <div class="sidebar-nav well">
                    <ul class="nav nav-list">
                        <li class="nav-header">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">类型选择</font>
                            </font>
                        </li>
                        <li v-for="(li,i) in items" v-bind:class="{active:li.isSelect}">
                            <a href="javascript:;" @click.self.prevent="onSelect(i)">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;"> {{ li.name }}</font>
                                </font>
                            </a>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
        <script>
            var left_menu = new Vue({
                el: '#left-menu',
                data: {
                    items: [{
                        name: "我的消息",
                        engName: "varture",
                        isSelect: true
                    }, {
                        name: "学分查看",
                        engName: "wit",
                        isSelect: false
                    }, {
                        name: "项目查看",
                        engName: "sports",
                        isSelect: false
                    }
                    ],
                    selected: 0
                }, methods: {
                    onSelect: function (e) {
                        this.items[this.selected].isSelect = false
                        this.items[e].isSelect = true
                        this.selected = e
                        if (e == 0) {
                            appTable.isShow = true
                            appScore.isShow = false
                            appPro.isShow = false
                        } else if (e == 1) {
                            appTable.isShow = false
                            appScore.isShow = true
                            appPro.isShow = false
                        } else if (e == 2) {
                            appTable.isShow = false
                            appScore.isShow = false
                            appPro.isShow = true
                        }
                    }
                }

            })
        </script>

        <style>
            .active a {
                color: white;
            }
        </style>

        <div id="app-table" class="col-md-9" v-show="isShow">

            <table class="table table-striped table-bordered table-hover">
                <caption>我的消息</caption>
                <thead>
                    <tr>
                        <th></th>
                        <th>
                            <center> 项目名称</center>
                        </th>
                        <th>
                            <center>申请人名称</center>
                        </th>
                        <th>
                            <center>电话</center>
                        </th>
                        <th>
                            <center>银行卡号</center>
                        </th>
                        <th>
                            <center>允许</center>
                        </th>
                        <th>
                            <center>拒绝</center>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(li,i) in items">
                        <th scope="row">
                            <center>{{i+1}}</center>
                        </th>
                        <td>
                            <center>{{li.name}}</center>
                        </td>
                        <td>
                            <center>{{li.stu_name}}</center>
                        </td>
                        <td>
                            <center>{{li.phone}}</center>
                        </td>
                        <td>
                            <center>{{li.stu_credit}}</center>
                        </td>
                        <td>
                            <center>
                                <a href="#" @click="allow(li)">
                                    <!-- allow -->
                                    <span class="glyphicon glyphicon-play"></span>
                                </a>
                            </center>
                        </td>
                        <td>
                            <center>
                                <a href="#" @click="repulse(li)">
                                    <!-- repulse -->
                                    <span class="glyphicon glyphicon-trash"></span>
                                </a>
                            </center>
                        </td>

                    </tr>

                </tbody>
            </table>
        </div>
        <script>
            var appTable = new Vue({
                el: '#app-table',
                data: {
                    isShow: true,
                    items: '',
                }, created: function () {
                    $.getJSON('/GQT/public/index/people/getMessage', function (data) {
                        appTable.items = data
                    })
                }, methods: {
                    allow: function (li) {
                        $.get('/GQT/public/index/people/allow', { id: li.id }, function (data) {
                            $.getJSON('/GQT/public/index/people/getMessage', function (data) {
                                appTable.items = data
                            })
                        })
                    }, repulse: function (li) {
                        $.get('/GQT/public/index/people/repulse', { id: li.id }, function (data) {
                            $.getJSON('/GQT/public/index/people/getMessage', function (data) {
                                appTable.items = data
                            })
                        })
                    }
                }
            })
        </script>
        <style>
            #app-table table tbody tr td a span {
                color: #000;
            }
        </style>




        <div id="app-score" class="col-md-9" v-show="isShow">

            <table class="table table-striped table-bordered table-hover">
                <caption>我的学分</caption>
                <thead>
                    <tr>
                        <th></th>
                        <th>
                            <center> 名称</center>
                        </th>
                        <th>
                            <center>类型</center>
                        </th>
                        <th>
                            <center>类别</center>
                        </th>
                        <th>
                            <center>等级</center>
                        </th>
                        <th>
                            <center>分值</center>
                        </th>
                        <th>
                            <center>时间</center>
                        </th>

                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(li,i) in items">
                        <th scope="row">
                            <center>{{i+1}}</center>
                        </th>
                        <td>
                            <center>{{li.name}}</center>
                        </td>
                        <td>
                            <center>{{li.type}}</center>
                        </td>
                        <td>
                            <center>{{li.ZhType.class}}</center>
                        </td>
                        <td>
                            <center>{{li.ZhType.grade}}</center>
                        </td>
                        <td>
                            <center>{{li.ZhType.score}}</center>
                        </td>
                        <td>
                            <center>{{li.time}}</center>
                        </td>
                    </tr>

                </tbody>
            </table>
            <table class="table table-striped table-bordered table-hover">
                <caption>学分统计</caption>
                <thead>
                    <tr>
                        <th>
                            <center> 姓名</center>
                        </th>
                        <th>
                            <center>德育</center>
                        </th>
                        <th>
                            <center>智育</center>
                        </th>
                        <th>
                            <center>体育</center>
                        </th>
                        <th>
                            <center>其他</center>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>

                        <td>
                            <center>{$stu_id}</center>
                        </td>
                        <td>
                            <center>{{varture}}</center>
                        </td>
                        <td>
                            <center>{{wit}}</center>
                        </td>
                        <td>
                            <center>{{sports}}</center>
                        </td>
                        <td>
                            <center>{{other}}</center>
                        </td>

                    </tr>

                </tbody>
            </table>
        </div>
        <script>
            var appScore = new Vue({
                el: '#app-score',
                data: {
                    isShow: false,
                    items: '',
                    varture: 0,
                    wit: 0,
                    sports: 0,
                    other: 0,

                }, created: function () {
                    $.getJSON('/GQT/public/index/people/getScore', function (data) {
                        appScore.items = data
                    })
                }, methods: {

                }, watch: {
                    isShow: function () {
                        this.varture = 0
                        this.sports = 0
                        this.wit = 0
                        this.other = 0
                        this.items.forEach(element => {
                            switch (element.type) {
                                case '德育':
                                    this.varture++;
                                    break;
                                case '智育':
                                    this.wit++
                                    break;
                                case '体育':
                                    this.sports++;
                                    break;
                                case '其他':
                                    this.other
                                    break;

                            }
                        })
                        $.get('/GQT/public/index/people/insterZ', { virture: this.varture, wit: this.wit, sport: this.sports, other_score: this.other }, function (data) {
                            console.log(data)
                        })
                    }
                }
            })
        </script>
        <style>
            #app-score table tbody tr td a span {
                color: #000;
            }

            table {
                border-collapse: unset;
            }
        </style>

        <div id="app-pro" class="col-md-9" v-show="isShow">

            <table class="table table-striped table-bordered table-hover">
                <caption>我的项目</caption>
                <thead>
                    <tr>
                        <th></th>
                        <th>
                            <center> 名称</center>
                        </th>
                        <th>
                            <center>类型</center>
                        </th>
                        <th>
                            <center>系别</center>
                        </th>
                        <th>
                            <center>姓名</center>
                        </th>
                        <th>
                            <center>身份</center>
                        </th>
                        <th>
                            <center>学分</center>
                        </th>
                        <th>
                            <center>时间</center>
                        </th>

                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(li,i) in items">
                        <th scope="row">
                            <center>{{i+1}}</center>
                        </th>
                        <td>
                            <center>{{li.name}}</center>
                        </td>
                        <td>
                            <center>{{li.class_name}}</center>
                        </td>
                        <td>
                            <center>{{li.dept}}</center>
                        </td>
                        <td>
                            <center>{{li.stu_name}}</center>
                        </td>
                        <td>
                            <center>{{checkS(li.status)}}</center>
                        </td>
                        <td>
                            <center>{{li.score}}</center>
                        </td>
                        <td>
                            <center>{{checkAC(li.is_access)}}</center>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">
                            <center>总分</center>
                        </th>
                        <td>
                            <center></center>
                        </td>
                        <td>
                            <center></center>
                        </td>
                        <td>
                            <center></center>
                        </td>
                        <td>
                            <center></center>
                        </td>
                        <td>
                            <center></center>
                        </td>
                        <td>
                            <center>{{score}}</center>
                        </td>
                        <td>
                            <center></center>
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>
        <script>
            var appPro = new Vue({
                el: '#app-pro',
                data: {
                    isShow: false,
                    items: '',
                    score: 0,
                }, created: function () {
                    $.getJSON('/GQT/public/index/people/getPeoPro', function (data) {
                        appPro.items = data
                        console.log(data)
                    })
                }, methods: {
                    checkS: function (i) {
                        if (i == 1) {
                            return '队长'
                        } else if (i == 2) {
                            return '队员'
                        }
                    }, checkAC: function (i) {
                        if (i == 0) {
                            return '申请中';
                        } else if (i == 1) {
                            return '已通过';
                        } else if (i == 2) {
                            return '已结题';
                        }
                    }
                }, watch: {
                    isShow: function () {
                        this.score = 0

                        this.items.forEach(element => {
                            this.score += element.score
                        })
                        $.get('/GQT/public/index/people/inster', { class: 'pro_score', num: this.score }, function (data) {
                            console.log(data)
                        })
                    }
                }
            })
        </script>
        <style>
            #app-score table tbody tr td a span {
                color: #000;
            }

            table {
                border-collapse: unset;
            }
        </style>
    </div>
</div>
{include file="common/footer"}